<template>
  <div id="center1">
    <div id="center-map">
      <!--建筑业产值  -->
      <div class="left">
        <div class="title">
          建筑业产值（元）
          <span
            :class="[
              { 'is-data-up': isConstructionUp },
              { 'is-data-down': !isConstructionUp }
            ]"
            style="margin-left: 7rem;"
          >
            同比
            <span v-if="constructionData.cumulativetotalvalueyear >= 0">↑</span>
            <span v-else>↓</span>
            {{ constructionData.cumulativetotalvalueyear }}%
          </span>
        </div>
        <div class="building color">{{ constructionData.cumulativetotalvalue }}</div>
      </div>
      <!--  房地产开发投资（元）-->
      <div class="right">
        <div class="title">
          房地产开发投资（元）
          <span
            :class="[
              { 'is-data-up': isBuildingUp },
              { 'is-data-down': !isBuildingUp }
            ]"
            style="margin-left: 0.5rem"
          >
            同比
            <span v-if="bulidingData.sameratio >= 0">↑</span>
            <span v-else>↓</span>
            {{ bulidingData.sameratio }}%
          </span>
        </div>
        <div class="building color">{{ bulidingData.yearprice }}</div>
      </div>
      <MapView />
    </div>
    <!-- 危房处置量 -->
    <div class="center-bottom grid-item">
      <!-- 标题 -->
      <div class="title">
        <span>危房处置量</span>
        <year20andyear19 class="yearOrMonth" :year="isyear20" />
      </div>
      <div
        style="width: 400px;height:250px;left:1.54rem;top:4.31rem;font-size:0.92rem;position:absolute;"
      >
        <Chart :chartData="gcxmChart" />
      </div>
    </div>
    <!-- 行政审批 -->
    <div class="center-bottom grid-item center-bottom-right">
      <!-- 标题 -->
      <div class="title">
        <span>行政审批</span>
        <!-- <YearOrMonthSwitch class="yearOrMonth" :year="isThirdItemShowYear" /> -->
        <year20andyear19 class="yearOrMonth" :year="isyear20" />
      </div>
      <div style="margin-top:1rem;margin-left:1rem;width:100%;height:100%;">
        <!-- 上方三个数据展示框 -->
        <div
          style="display: flex;justify-content: center;width: 100%; margin-top: 2rem;margin-left: -1rem;"
        >
          <ShowRightThirdInfo
            title="总办件量"
            :number="auditData.total"
            unit1="件"
            style="border-right: 1px solid rgba(255,255,255,0.20);padding-right: 2.5rem;"
          />
          <ShowRightThirdInfo
            title="总平均用时"
            :number="auditData.avgtime"
            unit1="天/件"
            style="border-right: 1px solid rgba(255,255,255,0.20);padding: 0 2rem;"
          />
          <ShowRightThirdInfo
            title="总服务企业量"
            :number="auditData.totalservicecomp"
            unit1="家"
            style="margin-left:2rem"
          />
        </div>
        <!-- 左侧两个数据展示框 -->
        <div
          style="display: grid;float: left;border-right: 1px solid rgba(255,255,255,0.20);padding-right: 3rem;margin-top: 4rem;margin-left: 1.2rem;"
        >
          <ShowRightThirdInfo title="许可总办件量" :number="auditData.xktotal" unit1="件" />
          <ShowRightThirdInfo
            title="许可服务企业量"
            :number="auditData.xkservicecomp"
            unit1="件"
            style="margin-top: 4rem;"
          />
        </div>
        <CentSecondChart
          :chartData="socialHouseChartData.seriesData"
          style="float: left;padding-left: 2rem"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Chart from "../../components/echart/center/GCXMChart";
import MapView from "../../components/homePage/MapView";
// import MessageDiv from "../components/homePage/MessageDiv";
// import CenterFirstChart from "../components/echart/center/CenterFirstChart";
import CentSecondChart from "../../components/echart/center/CentSecondChartDatav";
// import YearOrMonthSwitch from "../../components/homePage/YearOrMonthSwitch";
import ShowRightThirdInfo from "../../components/homePage/ShowRightThirdInfo";
import year20andyear19 from "../../components/homePage/year20andyear19";

export default {
  components: {
    Chart,
    MapView,
    // MessageDiv,
    // CenterFirstChart,
    CentSecondChart,
    // YearOrMonthSwitch,
    year20andyear19,
    ShowRightThirdInfo
  },
  computed: {
    isBuildingUp: function() {
      if (this.bulidingData.sameratio > 0) {
        return true;
      } else {
        return false;
      }
    },
    isConstructionUp: function() {
      if (this.constructionData.cumulativetotalvalueyear > 0) {
        return true;
      } else {
        return false;
      }
    }
  },
  data() {
    return {
      // 危房处置量
      gcxmChart: {
        data: {
          wfzl: []
        }
      },
      //是否显示2020年
      isyear20: true,
      // 房产交易计时器执行次数
      houseTradeIntervalCount: 1,
      mapBuildingData: 0,
      bulidingData: {
        yearprice: 0.0,
        sameratio: 0,
        chainratio: 0
      },
      constructionData: {
        cumulativetotalvalueyear: 0,
        cumulativetotalvalue: 0
      },
      // 行政审批显示数据
      auditData: {
        data: {
          year: "2019",
          total: 0,
          avgtime: 0,
          totalservicecomp: 0,
          xktotal: 0,
          xkservicecomp: 0
        },
        // 存放当前年的住房保障数据
        year: {},
        // 存放当前月的住房保障数据
        month: {}
      },
      // 行政审批图标显示
      socialHouseChartData: {
        seriesData: {}
      },
      // 房产交易数据
      houseTradeData: {
        data: {
          total: "",
          totalareas: "",
          price: "",
          allprice: ""
        },
        // 单位
        unit: {
          total: "总套数(户)",
          allprice: "总成交价(亿元)",
          price: "平均价格(元)",
          totalareas: "总面积(㎡)"
        },
        year: {},
        month: {}
      },
      //
      houseTradeChartData: {
        xAxisData: ["12"],
        seriesData: {
          house: {
            name: "住宅",
            type: "line",
            stack: "总量",
            smooth: true,
            data: [1]
          },
          business: {
            name: "商业",
            type: "line",
            stack: "总量",
            smooth: true,
            data: [1]
          },
          office: {
            name: "办公",
            type: "line",
            stack: "总量",
            smooth: true,
            data: [2]
          },
          other: {
            name: "其他",
            type: "line",
            stack: "总量",
            smooth: true,
            data: [3]
          }
        }
      },
      // 房产交易按年的数据
      houseTradeYearData: [],
      // 房产交易按月的数据
      houseTradeMonthData: []
    };
  },
  mounted() {
    this.getDangerousHouse();
    this.getThemeHouseTradeAll();
    this.getThemeConstruction();
    this.getThemeAuditYear(true);
    // let _this = this;
    // setInterval(function() {
    //   let tag = !_this.isThirdItemShowYear;
    //   if (tag) {
    //     _this.getThemeAuditYear(true);
    //   } else {
    //     _this.getThemeAuditYear(false);
    //   }
    //   _this.isThirdItemShowYear = tag;
    // }, 10 * 1000);
  },

  methods: {
    // 获取危房处置量数据
    getDangerousHouse() {
      let url = "http://10.10.208.6:2020/home/serv";
      let param1 = { path: "st", groupid: 52, ismonth: 1 };
      let vm = this;
      vm.http.post(url, param1).then(res => {
        // console.log("危房处置", res);
        vm.gcxmChart.data.wfzl = res.data.sp_wfczl_wfzl;
      });
    },
    // 获取行政审批数据
    getThemeAuditYear(isYear) {
      let url = "http://10.10.208.6:2020/home/serv";
      let param = { path: "st", groupid: 51, ismonth: 1 };
      let vm = this;
      if (isYear) {
        param.year = 1;
      } else {
        param.year = 2;
      }
      vm.http.post(url, param).then(res => {
        vm.auditData.total = res.data.sp_xzsp_zbjl[0];
        vm.auditData.avgtime = res.data.sp_xzsp_zpjys[0];
        vm.auditData.totalservicecomp = res.data.sp_xzsp_zfwqyl[0];
        vm.auditData.xktotal = res.data.sp_xzsp_xkzbjl[0];
        vm.auditData.xkservicecomp = res.data.sp_xzsp_xkfwqyl[0];

        // 计算当前行政审批的图表数据
        vm.socialHouseChartData.seriesData = {
          xktotal:
            (vm.auditData.xktotal /
              (vm.auditData.xktotal + vm.auditData.xkservicecomp)) *
            100,
          xkservicecomp:
            (vm.auditData.xkservicecomp /
              (vm.auditData.xktotal + vm.auditData.xkservicecomp)) *
            100
        };
      });
    },
    // 根据住房保障的数据计算图表需要的显示数据 data为当月或当年的显示数据 isArea为true时获取面积占比的数据，反之，获取数量占比数据
    calculateSocialHouseChartData(data) {
      if (!data) {
        return;
      }

      let seriesData = {
        //棚户区改造新开工
        ShantyTownNewWorkRatio: data["ShantyTownNewWorkRatio"],
        //保障安居工程竣工
        SubsidizedHousingPrjCompletedRatio:
          data["SubsidizedHousingPrjCompletedRatio"],
        //公租房租赁补贴
        PublicHouseRentalSubsidyRatio: data["PublicHouseRentalSubsidyRatio"],
        //公共租赁住房分配
        PublicHouseAssignedRatio: data["PublicHouseAssignedRatio"]
      };
      return seriesData;
    },

    changeHouseTradeCharts(data, type, isYear, _this) {
      let seriesData = {};
      let tagArr = ["house", "business", "office", "other"];
      let newTagArr = []; //存放需要的字段名称
      // 根据type生产需要的字段名称
      for (let i = 0; i < tagArr.length; i++) {
        let tag = "";
        if (type === "avgprice") {
          tag = "avg" + tagArr[i] + "price";
        } else {
          tag = tagArr[i] + type;
        }
        newTagArr.push(tag);
        seriesData[tagArr[i]] = [];
      }
      let xAxisData = [];
      data.forEach(item => {
        if (isYear) {
          xAxisData.unshift(item.month);
        } else {
          xAxisData.push(item.areaname);
        }

        for (let i = 0; i < 4; i++) {
          if (isYear) {
            seriesData[tagArr[i]].unshift(item[newTagArr[i]]);
            // xAxisData.shift(item.month);
          } else {
            seriesData[tagArr[i]].push(item[newTagArr[i]]);
            // xAxisData.push(item.areaname);
          }
        }
      });
      _this.houseTradeChartData.xAxisData = xAxisData;
      tagArr.forEach(item => {
        _this.houseTradeChartData.seriesData[item].data = seriesData[item];
      });
    },

    // 显示大屏数字变化过程 value为变化后的数字 tag为字段名称 item子字段名称 详细参考this.bulidingData字段
    oldValueToNewValue(value, tag, item) {
      let isAdd = true;
      let newValue = value;
      // 获取要变化的data数据
      let oldValue = this[tag][item];
      if (newValue > oldValue) {
        isAdd = true;
      } else if (newValue < oldValue) {
        isAdd = false;
      } else {
        return;
      }
      let _this = this;
      let i = 0;
      // 开启定时变化
      let timeId = setInterval(function() {
        let data = _this[tag][item];
        i++;
        if (isAdd) {
          data += Math.pow(2, i);
          if (data >= value) {
            _this[tag][item] = value;
            clearInterval(timeId);
          } else {
            _this[tag][item] = data;
          }
        } else {
          data -= Math.pow(2, i);
          if (data <= value) {
            _this[tag][item] = value;
            clearInterval(timeId);
          } else {
            _this[tag][item] = data;
          }
        }
      }, 100);
    },
    // 获取大屏数据房产交易
    getThemeHouseTradeAll() {
      let url = "http://10.10.208.6:2020/home/serv";
      let param = { path: "ov", groupid: 20 };
      let vm = this;
      vm.http.post(url, param).then(res => {
        vm.bulidingData.sameratio = res.data.fdc_zcjje_bfb;
        vm.oldValueToNewValue(
          parseInt(res.data.fdc_jyzz),
          "bulidingData",
          "yearprice"
        );
      });
    },
    // getThemeHouseTradeAll() {
    //   let url = this.baseUrl + "/GetThemeHouseTradeAll";
    //   this.http.post(url, { year: 2019, month: 12 }).then(response => {
    //     let resData = response.data;
    //     this.bulidingData.sameratio = resData.sameratio;
    //     this.oldValueToNewValue(
    //       parseInt(response.data.yearprice),
    //       "bulidingData",
    //       "yearprice"
    //     );
    //   });
    // },
    // 获取大屏数据建筑业产值
    getThemeConstruction() {
      let url = "http://10.10.208.6:2020/home/serv";
      let param = { path: "ov", groupid: 1 };
      let vm = this;
      vm.http.post(url, param).then(res => {
        vm.constructionData.cumulativetotalvalueyear = res.data.jzy_jzyzcz_tb;
        vm.oldValueToNewValue(
          res.data.jzy_jzyzcz_je * 100000000,
          "constructionData",
          "cumulativetotalvalue"
        );
      });
    }
    // getThemeConstruction() {
    //   let url = this.baseUrl + "/GetThemeConstruction";
    //   this.http.post(url, { year: 2019, month: 11 }).then(response => {
    //     this.constructionData.cumulativetotalvalueyear =
    //       response.data[0].cumulativetotalvalueyear;
    //     this.oldValueToNewValue(
    //       response.data[0].cumulativetotalvalue * 100000000,
    //       "constructionData",
    //       "cumulativetotalvalue"
    //     );
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/datav/center.scss";

.year_zps_ul {
  display: flex;
  position: absolute;
  left: 20.46rem;
  top: 0rem;
  li {
    border: 1px solid #1856fd;
    width: 3.07rem;
    height: 1.85rem;
    font-size: 0.92rem;
    line-height: 1.85rem;
    text-align: center;
    &.active {
      background: #1856fd;
    }
  }
}
</style>